<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p class="word">撩课</p>
        <button class="btn">点我</button>
    </div>
    <button id = 'btn1'>删除</button>
    <button id = 'btn2'>修改</button>
    <script>
        window.onload = function(){
            //增删改查操作
            let box = document.getElementById('box');
            //1、创建节点
            let img = document.createElement('img');
            img.src = '../img/aple.jpg';
            box.appendChild(img);//在尾部增加元素

            let input = document.createElement('input');
            input.type = 'color';//在尾部增加元素
            // box.appendChild(input);
            let btn = document.getElementsByClassName('btn')[0];
            box.insertBefore(input,btn)//在某个元素前面增加元素

            //2、删除节点
            let btn1 = document.getElementById('btn1');
            btn1.onclick = function(){
                // btn.remove();
                img.remove();//删除选中元素
            }

            //3、修改节点内容
            // console.log(box.innerText);//输出标签中的文本
            // console.log(box.innerHTML);//将box中的所有东西全部输出

            let btn2 = document.getElementById('btn2');
            btn2.onclick = function(){
                let p = document.getElementsByClassName('word')[0];
                // console.log(p.innerText);
                p.innerText = '撩课学院';//修改标签中的文本
                p.innerHTML = '<input type ="text">';//修改标签
                // p.innerHTML = '撩课学院';//也能修改文本
                //innerHTML传入的值是文本就是修改标签的文本，传入的是标签就是修改标签
                
                // console.log(img.src);
                // img.alt = "今天可难受"

                // 设置属性(修改属性)
                // img.setAttribute('alt','修改内容')
                //删除属性
                // img.removeAttribute('src')
            }


            // 4、克隆标签
            //浅克隆
            // let newbox = box.cloneNode();//只是单纯的克隆一层“皮”，里面的内容没有克隆
            // document.body.appendChild(newbox);
            //深克隆
            let newbox = box.cloneNode(true);//把所有都克隆出来
            document.body.appendChild(newbox);
        }
    </script>
</body>
</html>